<template>
	<div>
		<transition :name="transitionName">
		  <keep-alive>
			  <router-view class="transitionBody">111</router-view>
		  </keep-alive>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'collect',
		data() {
			return {
				show: true,
				transitionName: 'transitionLeft'
			};
		},
		watch: { 
  '$route' (to, from) { 
   const arr = ['/goods','/ratings','/seller'];
   const compare = arr.indexOf(to.path)>arr.indexOf(from.path);
   this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
  } 
 } 
	
	}
</script>

<style scoped="scoped">
.transitionBody{
 transition: all 0.15s ease; /*定义动画的时间和过渡效果*/
}
 
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0); 
   /*当左滑进入右滑进入过渡动画*/
}
 
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0); 
  transform: translate(-100%, 0); 
}
</style>
